<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>12_DOM事件监听</title>
</head>
<body>
<button onclick="alert('点击了')">按钮</button>
<button id="btn">我是按钮</button>
<h4>震惊!居然发生了这种事...</h4>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur deserunt doloremque doloribus excepturi,
    explicabo, illo iusto nam necessitatibus odit officia officiis omnis optio quae quaerat quam qui quis, sapiente
    veritatis?
</div>
<div>Aut consequuntur, dolorum eum hic illum perferendis porro ratione saepe veniam voluptas! Alias asperiores beatae
    dolorem esse est fuga incidunt ipsum pariatur porro repellendus! Dignissimos est obcaecati reiciendis repellat
    vitae!
</div>
<div>Ad alias, aspernatur at atque, blanditiis commodi consequuntur illo incidunt itaque iusto magnam magni nam optio
    quam quasi qui quos repellat rerum, sit voluptatem! Aspernatur dolorum excepturi natus nihil tempora.
</div>
<div>Blanditiis cumque dolore enim eveniet ex expedita explicabo fugiat magni nesciunt nihil nisi odio, pariatur ratione
    rem sint totam voluptate voluptatem? Aut natus necessitatibus possimus reiciendis soluta suscipit vitae voluptatum!
</div>
<div>Aliquam animi assumenda atque, blanditiis consectetur consequatur corporis deleniti dignissimos doloremque ducimus
    eligendi et excepturi, expedita illum ipsam itaque iure laudantium nisi, nulla quisquam quos sapiente soluta velit
    vitae voluptas.
</div>
<div>Adipisci amet deserunt eligendi inventore maxime modi reprehenderit saepe, ut. Cum in inventore maiores
    repellendus. Aliquid atque, consequatur dolore modi neque nesciunt, non odit praesentium provident quaerat ratione,
    sunt voluptatum!
</div>
<div>Animi atque beatae blanditiis consequuntur explicabo, harum, illo in ipsam iusto provident quos repudiandae, rerum
    sunt? A excepturi, impedit ipsam nesciunt officiis perspiciatis sint soluta vel! At debitis, eius? Eligendi.
</div>
<div>Accusantium at deleniti eius in numquam officiis provident rem totam ut, velit. A, ad atque commodi consequuntur
    ducimus iure iusto magni mollitia possimus qui, rem repellendus sit ut. Iste, repellendus.
</div>
<div>Ab accusamus aperiam aut beatae commodi consequatur corporis culpa deleniti dicta doloremque facilis fugiat
    incidunt laudantium, magnam molestias odio perspiciatis, porro quae quam quasi quisquam rem sunt tempora ut
    voluptatibus.
</div>
<div>Aliquam, atque error ex facilis inventore iste laborum, magni, maxime natus officia pariatur quas quasi ratione vel
    vitae. Ad adipisci fugit ipsa iusto nihil provident quod saepe veniam voluptas, voluptatibus.
</div>
<div>Cumque repudiandae vitae voluptatibus. Ab corporis distinctio ex excepturi, facere fugiat id in, incidunt labore
    laudantium magnam modi molestiae nesciunt officia pariatur provident quia reprehenderit rerum similique sint sunt
    voluptatum!
</div>
<div>At aut, beatae blanditiis, culpa dolorem error expedita facilis fugiat hic id iure magni minus modi molestiae
    mollitia provident quia quisquam quos repellat soluta, sunt suscipit voluptatem. Minus, repellat reprehenderit?
</div>
<div>Architecto debitis et excepturi expedita illo impedit itaque, mollitia nam necessitatibus nesciunt, quisquam quo
    rerum soluta. Aperiam at corporis cum eius eos error illo laudantium nobis, odio, officiis quaerat, saepe!
</div>
<div>A ab, amet aperiam at deleniti, dignissimos ducimus eius enim est et explicabo facilis illum impedit, incidunt
    nihil nobis nostrum perspiciatis quae recusandae rem saepe sunt suscipit tenetur totam voluptatibus.
</div>
<div>Alias animi aperiam at, atque beatae commodi consequatur, debitis deleniti dolore enim eos hic id itaque mollitia
    nam nesciunt, odit quaerat quisquam ratione reprehenderit sunt tempora voluptate! Distinctio, saepe voluptatem!
</div>
<div>A, accusamus animi commodi consequuntur expedita fugit itaque, maiores molestias, necessitatibus obcaecati quaerat
    recusandae sed tempore. Aperiam facilis inventore laboriosam laborum pariatur quam. Cupiditate impedit, possimus
    quod rem velit voluptates.
</div>
<div>Aliquid debitis eligendi ex explicabo non quaerat qui quibusdam repellendus. Ab accusantium amet cum delectus,
    eaque eum exercitationem, id in laborum magni maxime, neque placeat quaerat quam quo voluptates voluptatum?
</div>
<div>Amet consectetur consequuntur dicta, dolorem facere fuga laudantium maiores minima modi natus non odio, omnis
    pariatur quibusdam, quod repellendus repudiandae vel voluptatum! Maiores obcaecati praesentium provident suscipit
    voluptate. Id, saepe.
</div>
<div>Ad aliquam aspernatur at consectetur dolor eaque est eveniet fugit hic ipsa iusto numquam praesentium quaerat
    repudiandae, saepe sequi tempora, voluptas, voluptatibus. Cumque illo pariatur sit vitae. Ipsa modi, mollitia.
</div>
<div>Ab animi, atque, dignissimos, enim et excepturi fugiat impedit incidunt iusto necessitatibus porro quidem quod
    temporibus unde veritatis. Deserunt facilis pariatur quisquam quod sed? Eum facere in nesciunt obcaecati totam?
</div>
<div>Dignissimos esse nam nemo provident tenetur totam voluptates? Animi aspernatur aut blanditiis commodi consequuntur,
    dolore doloribus fugiat harum illo impedit, officia pariatur perferendis quas ratione, repellendus saepe temporibus
    vel veritatis.
</div>
<div>Ab asperiores aut commodi, corporis cupiditate, dolore dolores earum ex facere illum inventore ipsam ipsum mollitia
    nam nemo nesciunt nihil repudiandae, saepe sapiente temporibus? Ab ad beatae nobis quisquam tempore?
</div>
<div>At autem expedita inventore laudantium. Adipisci eius hic minima molestias quae quisquam reprehenderit repudiandae!
    Alias dolorem expedita fuga inventore labore nobis repellendus saepe tempore. Autem dolores laborum quas ratione
    voluptatum?
</div>
<div>Aliquam atque autem consequuntur culpa cumque deserunt dicta dolore doloremque, doloribus, expedita illo in
    laudantium libero, quaerat saepe sit velit vitae voluptas voluptates voluptatum. Adipisci esse laboriosam quasi
    velit voluptates?
</div>
<div>Autem earum et recusandae vel. Amet animi architecto debitis dignissimos, error est explicabo illo in inventore
    ipsa, ipsum laborum molestias odit officia provident quaerat quis reiciendis sit tempora vero voluptas.
</div>
<div>Asperiores, quis sunt. Accusantium amet at cupiditate debitis earum eos et exercitationem fuga in magnam molestias,
    natus nobis nostrum officiis porro praesentium recusandae rem reprehenderit sed sequi sunt ut voluptatem.
</div>
<div>Adipisci at commodi dolore explicabo iste quaerat sapiente? A dicta id illum iste modi nemo neque nihil omnis quae
    reprehenderit, sequi sint temporibus voluptatum! Cum dolorum eius reprehenderit sed ut.
</div>
<div>Accusantium adipisci animi consequuntur cumque dicta esse harum libero magnam, natus nihil obcaecati porro
    praesentium provident quia quod quos sequi, temporibus tenetur? Aspernatur, porro quo. Amet beatae commodi excepturi
    id?
</div>
<div>Accusantium architecto corporis cum ducimus error exercitationem laboriosam magni maxime minus placeat, porro,
    quibusdam quo quos reprehenderit rerum totam veniam! Alias deserunt facilis, inventore natus repudiandae sit velit
    vero voluptatem!
</div>
<div>A ab eaque facere, illo, officia provident quae quam recusandae repudiandae, similique tempore ullam velit
    veritatis? Consequuntur cumque, dicta dolorem ex excepturi iste minus modi omnis sunt suscipit, tenetur ut?
</div>
<div>Accusamus ad commodi culpa cupiditate delectus dignissimos dolorum enim esse eum fuga impedit itaque magni
    molestiae, molestias mollitia nihil perspiciatis placeat provident quae, quibusdam quo sapiente soluta, totam
    voluptatem voluptates?
</div>
<div>Consectetur facilis incidunt natus nesciunt officiis provident ratione suscipit ullam vero vitae? Assumenda dolore
    illum repellendus voluptas? Adipisci culpa deserunt dolor dolore eaque et hic, laboriosam nihil porro, soluta vero!
</div>
<div>Blanditiis culpa cum dignissimos ex exercitationem labore molestias obcaecati quo repellat sit. Ipsa pariatur
    praesentium quasi quis quod. Atque ducimus est ipsa pariatur perferendis placeat, quas quis quos repellat sunt.
</div>
<div>Assumenda fugit molestias placeat porro, qui rem similique totam veritatis? A accusamus aliquam aperiam, asperiores
    consequatur consequuntur corporis cumque esse facilis fugit hic natus nobis odit pariatur quia recusandae
    reiciendis!
</div>
<div>Beatae eligendi enim impedit iste? Architecto corporis cupiditate inventore magni? Autem deserunt dignissimos dolor
    eaque earum eos exercitationem, expedita inventore nisi nostrum nulla quidem quo recusandae sunt unde veniam vitae.
</div>
<div>Eligendi esse et, eveniet ex hic labore nostrum quisquam quo. Aliquam animi aut cupiditate dolorem earum eius
    eveniet expedita fuga iste natus nihil officiis pariatur, quas quia ut! Autem, sit!
</div>
<div>Architecto commodi consequatur culpa debitis deleniti distinctio, dolorum eaque eligendi esse illo impedit incidunt
    inventore laboriosam laudantium natus nihil non, optio pariatur quaerat rerum soluta temporibus totam vel? Nemo,
    quia.
</div>
<div>Ad consectetur cumque enim incidunt laborum magnam modi natus necessitatibus obcaecati, quam reiciendis
    reprehenderit sit vitae? Aperiam at hic impedit magnam modi, molestiae neque perspiciatis quas repudiandae! Ea,
    quos, vitae?
</div>
<div>Aliquid animi dicta distinctio dolores eligendi eos exercitationem harum ipsa laboriosam laudantium maiores,
    molestiae nisi optio quasi quia, quis rerum sapiente sequi similique sit! A commodi delectus minus quas voluptatem.
</div>
<div>A, ab amet, beatae impedit non placeat praesentium provident quaerat sed sequi temporibus vero. Alias deleniti
    dignissimos ea eos maiores veniam. Doloribus est hic impedit in itaque porro possimus quidem?
</div>
<div>Distinctio dolores eos error excepturi facilis fugit ipsum, iure, libero minus natus nihil recusandae reiciendis
    sapiente tempore veritatis? Adipisci aspernatur consectetur fuga fugiat id iure natus nisi nostrum pariatur sunt.
</div>
<div>Aspernatur at autem doloremque earum illo itaque, laborum maxime nam, nostrum officia quibusdam temporibus. Ad
    consequuntur culpa dolorum ducimus facere illo iste iusto odio quae quia quos, rerum temporibus veniam?
</div>
<div>Animi atque deserunt dolor dolores facere impedit mollitia nemo odio, similique. At deserunt harum itaque minima
    modi molestiae, nemo officiis repellendus ullam veniam. Ab ad architecto, ex nobis optio voluptatibus.
</div>
<div>Accusamus architecto assumenda distinctio facere, illo illum maxime molestias nam neque odio odit, possimus quas
    quo ratione reiciendis totam voluptates? Amet, eius excepturi perspiciatis quam repellat soluta suscipit tenetur ut?
</div>
<div>Ab ad alias at autem debitis deserunt dignissimos dolores ea eligendi error et ex facere ipsam ipsum iste nulla
    perspiciatis provident quia quibusdam quisquam, ratione recusandae rem reprehenderit repudiandae sit.
</div>
<div>Animi commodi corporis earum excepturi impedit ipsam, itaque molestiae nisi omnis possimus quae repellat
    reprehenderit repudiandae ut veritatis. Alias aliquam autem dignissimos dolore ea in incidunt ipsa mollitia sapiente
    sit!
</div>
<div>Accusantium eligendi possimus quam? Accusantium asperiores atque, cum delectus ea eos, est explicabo facere fugit
    id nostrum quod repudiandae sit tempora ullam veritatis vitae. Atque facere illum magni nihil tempora.
</div>
<div>Alias at cumque doloribus exercitationem facere fugit in iste, laborum magnam necessitatibus nisi numquam optio,
    perspiciatis possimus provident quae quaerat quibusdam quod quos ratione reiciendis repellendus sapiente sunt, velit
    voluptatem.
</div>
<div>Aliquam consequatur doloribus, ea, eaque eum eveniet explicabo perspiciatis placeat quibusdam quo ratione repellat,
    totam unde? Aspernatur blanditiis consectetur consequatur consequuntur, distinctio dolorem, dolores dolorum enim
    nobis, non sapiente veniam.
</div>
<div>Adipisci, aliquid assumenda aut cumque deleniti dolor et, ipsa ipsam iure modi molestiae, non nostrum obcaecati
    officiis optio qui reiciendis? Adipisci, consectetur consequatur harum illo nisi porro similique sit? Ducimus.
</div>
<div>Alias aspernatur aut dolor ea eligendi eos esse ex fugiat, inventore iste magnam mollitia quisquam quos, recusandae
    rem similique totam ut velit? Architecto cumque in provident, qui repellendus veniam veritatis?
</div>
<div>Eaque odit rerum tempore velit! Alias amet architecto deleniti dolore ducimus iusto neque possimus quasi
    repudiandae voluptate! Dolore inventore quibusdam quisquam temporibus voluptate. Animi consequuntur et facere
    facilis fuga nostrum.
</div>
<div>A accusamus accusantium adipisci at, autem consectetur eos eveniet facere hic ipsum iure labore laboriosam magni
    minus molestias natus necessitatibus nihil obcaecati officiis quas quod recusandae reprehenderit veritatis
    voluptatem voluptates!
</div>
<div>Animi assumenda consectetur dolores earum esse eveniet exercitationem natus nobis numquam officia, placeat quo
    ratione sed sequi tempora tenetur unde, vero? Cupiditate dignissimos ipsam laudantium, molestiae provident quam rem
    reprehenderit!
</div>
<div>Dolor minima nulla voluptatibus? Delectus eveniet fuga labore perspiciatis quasi. Blanditiis dolores esse illum
    nulla ratione! Assumenda blanditiis cumque deleniti dicta, distinctio illo, perspiciatis, possimus rerum sapiente
    suscipit tenetur voluptas.
</div>
<div>Ipsa maiores provident rerum voluptas. Assumenda beatae consequuntur debitis deserunt dolor dolorem eligendi eos
    esse in laboriosam magnam nisi provident quae quam quibusdam quos, rem similique, suscipit tenetur totam voluptas!
</div>
<div>Amet assumenda exercitationem harum, laudantium maiores nam non numquam quasi quos soluta. Delectus dolor doloribus
    fuga ipsam iste magni nobis non nulla odio officia officiis possimus ratione reiciendis repellat, tenetur.
</div>
<div>Amet architecto autem blanditiis, consectetur, culpa cumque dicta doloribus eos esse iusto laboriosam laborum natus
    necessitatibus nihil nostrum numquam obcaecati officia provident quaerat qui sit soluta tenetur totam velit
    voluptatibus.
</div>
<div>Aperiam commodi consectetur consequatur consequuntur corporis cum dolore doloribus eligendi facilis fugiat illo
    incidunt inventore iure laborum maiores minima minus necessitatibus nostrum nulla odit, quas quasi repellat veniam
    voluptas voluptatum!
</div>
<div>Aut, cum enim eveniet fugiat inventore ipsa itaque molestiae quos? Alias atque autem dolore error laudantium minus,
    natus nisi nostrum odio placeat saepe sint, temporibus unde. Fuga incidunt optio suscipit.
</div>
<script>
    //1.获取按钮元素
    let btnE = document.getElementById('btn');
    /*绑定鼠标点击事件*/
    btnE.addEventListener('click',function(){
        alert('点击了2');
    })
    //2.获取标题元素
    let h4E = document.querySelector('h4');
    h4E.addEventListener('mouseover',function (){/*绑定鼠标移入事件*/
        console.log('标题被查看了');
    })
    /*window对象是浏览器自带的内置全局对象,代表了当前浏览器窗口*/
    window.addEventListener('resize',function (){
        //alert('窗口大小被改变了')
    })
    window.addEventListener('scroll',function (){
        alert('窗口被拖拽了')
    })
</script>
</body>
</html>